<template>
	<view class="register-container">
		<view class="header">
			<h1 class="tit">
				您好，欢迎使用学加家
			</h1>
			<text>为保证孩子安全，登录前请确保班主任已将您的手机号与学生绑定</text>
		</view>
		<view class="entry-box">
			<view class="entry-item">
				<view class="left">
					<text>手机</text>
					<text class="iconfont icon-icon-test24" />
				</view>
				<view class="right">
					<input :class="input1Class" type="text" v-model:value="tel" @input="showClearIcon1 = true"
						placeholder="请输入手机号" />
					<view v-if="showClearIcon1" @click="clearInput(1)" class="iconfont icon-icon-test44"></view>
				</view>
			</view>

			<!-- 			<view class="entry-item">
				<view class="left">
					<text>密码</text>
					<text class="iconfont icon-icon-test26"/>
				</view>
				<view class="right">
					<input :class="input2Class" :type="passwordClass" v-model:value="LoginInfo.psw" @input="showClearIcon2 = true" placeholder="请设置密码"/>
					<view :class="seeClass" @click="seePassword"></view>
					<view v-if="showClearIcon2" @click="clearInput(2)" class="iconfont icon-icon-test44"></view>
				</view>
			</view> -->

		</view>
		<view class="footer">
			<text :class="readClass" @click="read">
				<text :class="clickClass" />
				点击此处同意<text>服务协议</text>，<text>隐私权政策</text>
			</text>
			<view class="middle_button" @click="SendMessage()">
				获取验证码
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showClearIcon1: false,
				showClearIcon2: false,
				input1Class: '',
				input2Class: '',
				tel:'13278885303',
				passwordClass: 'password',
				seeClass: 'iconfont icon-icon-test1',
				clickClass: 'iconfont icon-icon-test49',
				flag: false,
				readClass: 'read'
			};
		},
		methods: {
			SendMessage() {
				if (this.tel != '') {
					if (this.flag) {
						this.$myReq({
								url: '/auth/api/sms/' + this.tel,
								method: 'GET'
							})
							.then((r) => {
								console.log(r);
								if (r.code == 200 || r.code==301) {
									console.log("发送成功")
									console.log("发送成功")
									uni.showToast({
										title: r.message,
										icon:'none'
									})
									setTimeout(() => {
										uni.navigateTo({
											url: '../sendVerificationCode/sendVerificationCode?tel=' +
												this.tel
										})
									}, 1000)
								}
							})
							.catch((err) => {
								console.log("发送失败", err)
								uni.showToast({
									title: '验证码发送失败',
									image: '../../../static/Icon/login/infoError.png',
									position: 'top'
								})
							})
					} else {
						this.readClass = 'read remind'
						setTimeout(() => {
							this.readClass = 'read'
						}, 200)
					}
				} else {
					if (this.tel == '') {
						this.input1Class = 'remind'
						setTimeout(() => {
							this.input1Class = ''
						}, 200)
					} else {
						this.input2Class = 'remind'
						setTimeout(() => {
							this.input2Class = ''
						}, 200)
					}
				}
			},
			read() {
				if (this.clickClass === 'iconfont icon-icon-test49') {
					this.flag = true
					this.clickClass = 'iconfont icon-icon-test43'
				} else {
					this.flag = false
					this.clickClass = 'iconfont icon-icon-test49'
				}
			},
			seePassword() {
				if (this.passwordClass === 'text') {
					this.passwordClass = 'password'
					this.seeClass = 'iconfont icon-icon-test1'
				} else {
					this.passwordClass = 'text'
					this.seeClass = 'iconfont icon-icon-test'
				}

			},
			clearInput(index) {
				if (index === 1) {
					this.tel = ''
					this.showClearIcon1 = false
				} else {
					this.psw = ''
					this.showClearIcon2 = false
				}
			}
		}
	}
</script>

<style lang="scss">
	.header {
		padding: 140rpx 70rpx 0rpx 70rpx;
		margin-bottom: 100rpx;

		.tit {
			font-size: 50rpx;
			margin-bottom: 15rpx;
		}

		text {
			font-size: 30rpx;
			color: #919191;
		}
	}

	.entry-box {
		margin: 0rpx 70rpx 0rpx 70rpx;

		.entry-item {
			border-bottom: 1px solid #C0C0C0;
			padding: 30rpx 0;
			line-height: 60rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			.left {
				width: 20%;

				text {
					margin-right: 10rpx;
				}
			}

			.right {
				width: 75%;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;

				input {
					height: 60rpx;
					line-height: 60rpx;
					// border: 1px solid red;
				}

				view {
					// border: 1px solid red;
					font-size: 40rpx;
					line-height: 60rpx;
				}

				view:nth-child(2) {
					color: $main-colorA;
				}

				view:nth-child(3) {
					color: $main-colorA;
				}
			}
		}
	}

	.footer {
		padding: 140rpx 70rpx 0rpx 70rpx;

		.read {
			padding-bottom: 10rpx;
			border-bottom: 1px solid white;
			color: #818181;

			i {
				color: $main-colorA;
				font-size: 30rpx;
				line-height: 30rpx;
				margin-right: 10rpx;
			}

			text {
				margin-left: 4rpx;
				color: $main-colorC;
			}
		}

		.middle_button {
			margin: 0 auto;
			margin-top: 50rpx;
			margin-bottom: 20rpx;
			width: 600rpx;
			height: 90rpx;
			line-height: 90rpx;
			text-align: center;
			border-radius: 20rpx;
			color: white;
			font-size: 35rpx;
			background: $main-colorB;
		}

		.remind {
			color: red;
			border-bottom: 1px solid #ff5500;
		}
	}

	.remind {
		color: red;
		border-bottom: 1px solid #ff5500;
	}
</style>
